<template>
	<view class="comment">
		<view class='tabs flex-between'>
			<view class="flex-center" :class="{active:tabIndex == 0}" @click="changeTab(0)">广场</view>
			<view class="flex-center" :class="{active:tabIndex == 1}" @click="changeTab(1)">关注</view>
			<view class="flex-center" :class="{active:tabIndex == 2}" @click="changeTab(2)">快讯</view>
			<view class="flex-center" :class="{active:tabIndex == 3}" @click="changeTab(3)">头条</view>
			<view class="flex-center" :class="{active:tabIndex == 4}" @click="changeTab(4)">观点</view>
		</view>
		<view class="content">
			<!-- 广场和关注 -->
			<view class="card1" v-if="tabIndex == 0 || tabIndex == 1 ">
				<block v-for="(item,index) in 3" :key="index">
					<view class="card" @click="goPage('/pages/forum/forumDetail')">
						<view class="top flex-between">
							<view class="left flex">
								<image src="/static/1.jpg" mode="aspectFill"></image>
								<view class="user">
									<view class="name">比特领航员</view>
									<view class="time">2021-04-21 14:31:01</view>
								</view>
							</view>
							<view class="right flex-center" :class="{active:index % 2 == 0}">关注</view>
						</view>
						<view class="content">就是立刻搭街坊是可见的就开始基地上空的飞机加快速度JFK就是打开飞机喀什地方就是看到</view>
						<view class="imgs flex">
							<block v-for="(v,k) in index+1 " :key="k">
								<image src="/static/1.jpg" mode="aspectFill"></image>
							</block>
				
						</view>
						<view class="bottom flex-between">
							<view class="flex-center">
								<image src="/static/share.png" mode="widthFix"></image>
								分享
							</view>
							<view class="flex-center">
								<image src="/static/comment.png" mode="widthFix"></image>
								评论
							</view>
							<view class="flex-center">
								<image src="/static/heart.png" mode="widthFix"></image>
								99
							</view>
						</view>
					</view>
				</block>
					
			</view>
			<!-- 快讯 -->
			<view class="card2" v-if="tabIndex == 2">
				<view class="date">04月25日 星期日</view>
				<block v-for="(item,index) in 5" :key="index">
					<view class="card">
						 <view class="time">14:30</view>
						 <view class="h2">博卡周报：Parity上线Wococo测试网</view>
						 <view class="p">
							 可是对方看了看时间点付款就开始登记反馈说的空间访客金可是对方看了看时间点付款就开始登记反馈说的空间访客金士顿科技手段咖啡机危急时刻的方式打开局面水电费就开始的空间富士康的佛教四大会计师的看法就是代课教师的空间放开手地方就开始大家介绍的看法就是快递寄付
						 </view>
						 <view class="bottom flex">
							 <view class="btn">↑看多</view>
							 <view class="btn">↓看空</view>
						 </view>
					</view>
				</block>
			</view>
			<!-- 头条和观点 -->
			<view class="card3" v-if="tabIndex == 3 || tabIndex == 4">
				<block v-for="(item,index) in 5" :key="index">
					<view class="list flex-between" @click="goPage('/pages/forum/newsDetail')">
						<view class="left flex-between">
							<view class="name">就开始的就开始经典福克斯的晶方科技</view>
							<view class="p">四哥聊币  2021-04-24 14:30:03</view>
						</view>
						<image src="/static/1.jpg" mode="aspectFill" class="right"></image>
					</view>
				</block>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabIndex:0
			}
		},
		methods: {
			changeTab(i){
				this.tabIndex = i
			},
			goPage(url){
				uni.navigateTo({
					url:url
				})
			}
		}
	}
</script>

<style lang="less">
	@color:#d4237a;
	.comment {
		
		.tabs{
			background: white;
			height: 70rpx;
			padding: 0 20rpx;
			view{
				width: 20%;
				height: 70rpx;
				position: relative;
				font-size: 32rpx;
				font-weight: bold;
				color:#999;
				&.active{
					color:#000;
					&::after{
						content:"";
						display: block;
						width: 20rpx;
						height: 4rpx;
						background: @color;
						position: absolute;
						bottom:3rpx;
						left:calc(50% - 10rpx);
					}
				}
			}
		}
		.content{
			
			.card1{
				.card {
					background: white;
					padding: 20rpx;
					border-radius: 10rpx;
					margin-bottom: 30rpx;
				
					.top {
						.left {
							image {
								width: 80rpx;
								height: 80rpx;
								border-radius: 50%;
								margin-right: 20rpx;
							}
				
							.name {
								font-size: 28rpx;
							}
				
							.time {
								font-size: 20rpx;
								color: #999;
							}
						}
				
						.right {
							font-size: 26rpx;
							color: #f0f;
							border: 1px solid #f0f;
							height: 50rpx;
							padding: 0 25rpx;
							border-radius: 25rpx;
				
							&.active {
								background: #f0f;
								color: white;
							}
						}
					}
				
					.content {
						font-size: 26rpx;
						padding: 15rpx 0;
						line-height: 1.5;
					}
				
					.imgs {
						image {
							width: 200rpx;
							height: 200rpx;
							margin-right: 22rpx;
							border-radius: 10rpx;
				
							&:last-child {
								margin-right: 0;
							}
						}
					}
				
					.bottom {
						margin-top: 20rpx;
				
						view {
							width: 25%;
						}
				
						image {
							width: 36rpx;
							height: auto;
							margin-right: 10rpx;
						}
					}
				}
				
			}
			.card2{
				.date{
					padding: 15rpx 30rpx;
					font-size: 30rpx;
					color:#666;
				}
				.card{
					background: white;
					padding: 24rpx 30rpx;
					margin-bottom: 30rpx;
					.time{
						font-size: 30rpx;
						color:#999;
					}
					.h2{
						font-size: 34rpx;
						font-weight: bold;
						margin: 10rpx 0;
					}
					.p{
						font-size: 30rpx;
						line-height: 1.6;
					}
					.bottom{
						margin-top: 20rpx;
						.btn{
							font-size: 28rpx;
							padding: 10rpx 20rpx;
							margin-right: 20rpx;
						}
					}
				}
			}
			.card3{
				background: white;
				padding: 0 24rpx;
				.list{
					padding: 24rpx 0;
					border-bottom: 1rpx solid #eee;
					.name{
						font-size: 34rpx;
					}
					.p{
						font-size: 26rpx;
						color:#999;
					}
					.left{
						flex-direction: column;
						align-items: flex-start;
						height:160rpx;
						width: 480rpx;
					}
					.right{
						width: 200rpx;
						height:160rpx;
						border-radius: 10rpx;
					}
				}
			}
		}
		
	}
</style>
